{#
    Video Help Modal Template
    
    Include this in your base.html ONCE:
    {% include 'video_help/frontend/modal.html' %}
    
    Make sure Bootstrap 5 JS is loaded.
#}

<!-- Video Help Modal -->
<div class="modal fade" id="videoHelpModal" tabindex="-1" aria-labelledby="videoHelpModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="videoHelpModalLabel">
                    <i class="fas fa-play-circle me-2"></i>
                    <span id="modal-category-name">Video Help</span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <div class="row g-0">
                    <!-- Video List (Left Side) -->
                    <div class="col-md-4 border-end" style="max-height: 500px; overflow-y: auto;">
                        <div class="p-3">
                            <h6 class="text-muted mb-3">
                                <i class="fas fa-list me-2"></i>Tutorial Videos
                            </h6>
                            <div id="video-help-list">
                                <!-- Videos will be loaded here -->
                                <div class="text-center py-5">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Video Player (Right Side) -->
                    <div class="col-md-8">
                        <div class="p-3">
                            <div id="video-help-player" class="bg-dark rounded mb-3" style="position: relative; padding-bottom: 56.25%; height: 0;">
                                <div id="player-placeholder" class="d-flex align-items-center justify-content-center text-white" 
                                     style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
                                    <div class="text-center">
                                        <i class="fas fa-play-circle fa-4x mb-3 opacity-50"></i>
                                        <p class="mb-0 opacity-75">Select a video to play</p>
                                    </div>
                                </div>
                                <iframe id="video-iframe" 
                                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none;"
                                        frameborder="0" 
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                        allowfullscreen></iframe>
                            </div>
                            
                            <div id="video-info-panel" style="display: none;">
                                <h5 id="current-video-title" class="mb-2"></h5>
                                <p id="current-video-description" class="text-muted small mb-0"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- No Videos Toast/Alert -->
<div id="noVideosToast" class="position-fixed top-50 start-50 translate-middle" style="z-index: 9999; display: none;">
    <div class="alert alert-info shadow-lg d-flex align-items-center" role="alert">
        <i class="fas fa-info-circle me-2 fa-lg"></i>
        <div>
            <strong>Coming Soon!</strong><br>
            Tutorial videos are coming soon.
        </div>
        <button type="button" class="btn-close ms-3" onclick="hideNoVideosMessage()"></button>
    </div>
</div>

<style>
    /* Video Help Modal Styles */
    #videoHelpModal .modal-content {
        border: none;
        border-radius: 12px;
        overflow: hidden;
    }
    
    #videoHelpModal .modal-header {
        border-bottom: none;
    }
    
    .video-help-item {
        display: flex;
        align-items: center;
        padding: 12px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        margin-bottom: 8px;
        border: 2px solid transparent;
    }
    
    .video-help-item:hover {
        background-color: #f8f9fa;
    }
    
    .video-help-item.active {
        background-color: #e7f1ff;
        border-color: #0d6efd;
    }
    
    .video-help-item .thumbnail {
        width: 80px;
        height: 45px;
        object-fit: cover;
        border-radius: 6px;
        margin-right: 12px;
        flex-shrink: 0;
    }
    
    .video-help-item .video-info {
        flex: 1;
        min-width: 0;
    }
    
    .video-help-item .video-title {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .video-help-item .video-duration {
        font-size: 12px;
        color: #6c757d;
    }
    
    .video-help-item .play-icon {
        color: #0d6efd;
        opacity: 0;
        transition: opacity 0.2s;
    }
    
    .video-help-item:hover .play-icon,
    .video-help-item.active .play-icon {
        opacity: 1;
    }
    
    /* Scrollbar Styling */
    #video-help-list::-webkit-scrollbar {
        width: 6px;
    }
    
    #video-help-list::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    #video-help-list::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
    
    #video-help-list::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1;
    }
</style>

<script>
    let currentCategory = '';
    let videoHelpModal = null;
    
    // Initialize modal
    document.addEventListener('DOMContentLoaded', function() {
        const modalElement = document.getElementById('videoHelpModal');
        if (modalElement) {
            videoHelpModal = new bootstrap.Modal(modalElement);
            
            // Close modal on ESC key
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && modalElement.classList.contains('show')) {
                    videoHelpModal.hide();
                }
            });
            
            // Close modal on outside click (handled by Bootstrap, but ensure video stops)
            modalElement.addEventListener('hidden.bs.modal', function() {
                stopVideo();
            });
        }
    });
    
    function loadVideoHelpModal(category) {
        currentCategory = category;
        
        // Reset modal state
        document.getElementById('video-help-list').innerHTML = `
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        `;
        document.getElementById('player-placeholder').style.display = 'flex';
        document.getElementById('video-iframe').style.display = 'none';
        document.getElementById('video-info-panel').style.display = 'none';
        
        // Fetch videos
        fetch(`/video-help/api/videos/${category}/`)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.videos.length > 0) {
                    document.getElementById('modal-category-name').textContent = data.category.name + ' - Video Help';
                    renderVideoList(data.videos);
                    
                    // Auto-play first video
                    playVideo(data.videos[0]);
                } else {
                    document.getElementById('video-help-list').innerHTML = `
                        <div class="text-center py-5 text-muted">
                            <i class="fas fa-video-slash fa-3x mb-3"></i>
                            <p>No videos available yet.</p>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error loading videos:', error);
                document.getElementById('video-help-list').innerHTML = `
                    <div class="text-center py-5 text-danger">
                        <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                        <p>Error loading videos. Please try again.</p>
                    </div>
                `;
            });
    }
    
    function renderVideoList(videos) {
        const listContainer = document.getElementById('video-help-list');
        listContainer.innerHTML = videos.map((video, index) => `
            <div class="video-help-item${index === 0 ? ' active' : ''}" 
                 data-video-id="${video.id}"
                 onclick="playVideo(${JSON.stringify(video).replace(/"/g, '&quot;')})">
                <img src="${video.thumbnail_url}" alt="${video.title}" class="thumbnail"
                     onerror="this.src='https://via.placeholder.com/80x45?text=Video'">
                <div class="video-info">
                    <div class="video-title">${video.title}</div>
                    ${video.duration ? `<div class="video-duration"><i class="fas fa-clock me-1"></i>${video.duration}</div>` : ''}
                </div>
                <i class="fas fa-play-circle play-icon"></i>
            </div>
        `).join('');
    }
    
    function playVideo(video) {
        // Update active state
        document.querySelectorAll('.video-help-item').forEach(item => {
            item.classList.remove('active');
        });
        document.querySelector(`.video-help-item[data-video-id="${video.id}"]`)?.classList.add('active');
        
        // Show video player
        const iframe = document.getElementById('video-iframe');
        const placeholder = document.getElementById('player-placeholder');
        
        iframe.src = `https://www.youtube.com/embed/${video.youtube_id}?autoplay=1`;
        iframe.style.display = 'block';
        placeholder.style.display = 'none';
        
        // Update video info
        document.getElementById('current-video-title').textContent = video.title;
        document.getElementById('current-video-description').textContent = video.description || '';
        document.getElementById('video-info-panel').style.display = 'block';
    }
    
    function stopVideo() {
        const iframe = document.getElementById('video-iframe');
        iframe.src = '';
        iframe.style.display = 'none';
        document.getElementById('player-placeholder').style.display = 'flex';
    }
    
    function showNoVideosMessage() {
        const toast = document.getElementById('noVideosToast');
        toast.style.display = 'block';
        setTimeout(hideNoVideosMessage, 4000);
    }
    
    function hideNoVideosMessage() {
        document.getElementById('noVideosToast').style.display = 'none';
    }
</script>